<template>
  <div class="bottomRight">
    <div class="bg-color-black" :class="warnShadow">
      <div class="header">电泳车间数据检测</div>
      <div v-if="!isStop" class="content">
        <echart
          :options="yAxis"
          style="
            height: 82%;
            width: 80%;
            position: absolute;
            left: 20px;
            top: 0px;
          "
        />
        <dv-water-level-pond :config="config" style="height: 80%; width: 80%" />
        <icon
          @click="openHistroy"
          size="40px"
          color="rgb(97 201 140)"
          style="position: absolute; right: 12px; top: 10px"
          ><AreaChartOutlined></AreaChartOutlined>
        </icon>
      </div>
      <div v-else>
        <div style="font-size: 35px; text-align: center">网络异常</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  defineComponent,
  defineProps,
  reactive,
  onMounted,
  ref,
  onUnmounted,
  useAttrs,
  computed,
} from "vue";
import { useStore } from "vuex";
import { AreaChartOutlined } from "@vicons/antd";
import { Icon } from "@vicons/utils";
const yAxis = {
  yAxis: {
    type: "category",
    data: [300, 200, 100, 0],
    boundaryGap: false,
    min: 0,
  },
  xAxis: { show: false },
};
const store = useStore();
let isStop = ref(false);
let warnShadow = ref("NA");
let waveHeight = 10;
let conf = [
  {
    data: [60],
    waveHeight,
    shape: "roundRect",
    formatter: "液位正常",
  },
  {
    data: [95],
    colors: ["#e31a1a"],
    waveHeight,
    shape: "roundRect",
    formatter: "液位偏高",
  },
  {
    data: [10],
    colors: ["#e31a1a"],
    waveHeight,
    shape: "roundRect",
    formatter: "液位偏低",
  },
  {
    data: [0],
    colors: ["#e31a1a"],
    waveHeight,
    shape: "roundRect",
    formatter: "网络异常",
  },
];
let config = computed(() => {
  let tmp = store.getters.getParamsByKey("zt");
  if (tmp.isWarn && tmp.isAlarm) warnShadow.value = "warnShadow";
  else warnShadow.value = "";
  if (tmp.val) {
    let v = 100 - parseInt(tmp.val / 5);
    v = v > 0 ? v : 3;
    conf[tmp.value].data[0] = v;
  }
  return conf[tmp.value];
});
const openHistroy = () => {
  window.open("/#/histroy", "histroy");
};
</script>

<style lang="scss" class scoped>
$box-height: 100%;
$box-width: 100%;

.bottomRight {
  // padding: 14px 16px;
  padding: 6px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;

  .header {
    font-size: 22px;
    font-family: cursive;
    font-weight: 700;
    padding: 10px;
  }

  .content {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .bg-color-black {
    height: calc($box-height - 0px);
    border-radius: 10px;
    overflow: hidden;
  }

  .text {
    color: #c3cbde;
  }

  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 300px;

    .active-ring-name {
      padding-top: 10px;
    }
  }
}

.warnShadow {
  border-radius: 10px;
  animation: warnShadow 1s infinite alternate;
}

@keyframes warnShadow {
  from {
    box-shadow: 0px 0px 20px 5px #c11616 inset;
  }

  to {
    box-shadow: 0px 0px 50px 10px #c11616 inset;
  }
}
</style>
